<route lang="json5" type="page">
{
  style: { navigationBarTitleText: '我的收藏', navigationStyle: 'custom' },
}
</route>
<template>
  <view class="my-collection">
    <view class="fixed-bg"></view>
    <view class="my-collection__container">
      <view class="my-collection__container__input">
        <view>
          <wd-icon name="search" size="32rpx" color="#FD7B1B"></wd-icon>
          <input v-model="name" placeholder="搜索岗位/企业" @confirm="getList" />
        </view>
      </view>
      <scroll-view
        class="my-collection__container__scroll-view"
        scroll-y
        @scrolltolower="loadMore(true)"
      >
        <view class="list">
          <JobCard class="mb-3 block" v-for="item in list" :key="item.id" :item="item" />

          <c-load-more
            v-if="['more', 'noMore'].includes(loadType)"
            loadingText="加载中..."
            :loadType="loadType"
          />
        </view>
        <c-empty v-if="list.length == 0" class="block mt-20" text="暂无收藏" />
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ApiGetCollectionList, ApiDeleteCollection } from '@/service/collection';
  import JobCard from '@/pages/components/jobCard.vue';
  import scrollMixin from '@/hooks/scrollMixin';

  const { initLoad, loadMore, list, loadType } = scrollMixin();

  const name = ref('');

  const getList = () => {
    initLoad({
      api: ApiGetCollectionList,
      params: {
        name: name.value,
      },
    });
  };

  onLoad(() => {
    getList();
  });
</script>

<style lang="scss" scoped>
  .my-collection {
    height: 100%;
    &__container {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 32rpx 0;
      box-sizing: border-box;

      &__input {
        margin: 0rpx 32rpx 32rpx;
        flex-shrink: 0;

        & > view {
          display: flex;
          align-items: center;
          border: 2rpx solid $uni-color-primary;
          background: #fcf7ed #ffffff;
          border-radius: 16rpx;
          padding: 24rpx 32rpx;
          gap: 26rpx;
          input {
            color: $uni-color-title;
            flex: 1 0 0;
            font-size: 32rpx;
          }
        }
      }

      &__scroll-view {
        flex: 1 0 0;
        height: 100%;
        box-sizing: border-box;
        .list {
          padding: 0 32rpx;
        }
      }
    }
  }
</style>
